<template>
  <div class="herb-detail">
    <!-- 返回按钮 -->
    <el-button @click="$router.back()" link icon="ArrowLeft">返回</el-button>

    <!-- 药材详情卡片 -->
    <el-card shadow="hover" class="detail-card" v-if="herb.name">
      <!-- 标题 -->
      <h2>{{ herb.name }} 详细介绍</h2>

      <!-- 图片展示 -->
      <div class="image-container">
        <img :src="herb.image" :alt="herb.name + '图片'" class="herb-image"/>
      </div>

      <!-- 详细信息 -->
      <div class="content">
        <p><strong>简介：</strong>{{ herb.description }}</p>
        <p><strong>功能与主治：</strong>{{ herb.function }}</p>
        <p><strong>用法用量：</strong>{{ herb.usage }}</p>
        <p v-if="herb.caution"><strong>注意事项：</strong>{{ herb.caution }}</p>
      </div>
    </el-card>
    <div v-else>
      加载中...
    </div>
  </div>
</template>

<script>
export default {
  name: 'HerbDetail',
  data() {
    return {
      herbs: [
        { id: 1, name: '当归', image: new URL('@/assets/images/yaocai/01.png', import.meta.url).href, description: '当归是一种常用中药材，具有补血活血、调经止痛、润肠通便的功效。', function: '用于血虚萎黄、月经不调、经闭腹痛、跌打损伤等症。', usage: '煎服，每次6-12克，水煎服，或入丸散剂。', caution: '湿盛中满、大便泄泻者忌用。' },
        { id: 2, name: '枸杞', image: new URL('@/assets/images/yaocai/02.png', import.meta.url).href, description: '枸杞是一种常见的滋补药材，主要产于我国宁夏等地，具有滋补肝肾、益精明目之效。', function: '适用于肝肾阴亏、腰膝酸软、头晕目眩、视力减退等症状。', usage: '泡茶饮用，或煮粥食用，每日适量。', caution: '' },
        // 其他药材...
      ],
      westernMedicines: [
        { id: 101, name: '复方氨酚烷胺胶囊', image: new URL('@/assets/images/western/101.png', import.meta.url).href, description: '用于缓解普通感冒及流行性感冒引起的发热、头痛等症状。', function: '解热镇痛，缓解感冒症状。', usage: '口服，成人一次一粒，一日三次，或遵医嘱。', caution: '对本品成分过敏者禁用。' },
        { id: 102, name: '银翘解毒片', image: new URL('@/assets/images/western/102.png', import.meta.url).href, description: '银翘解毒片是治疗风热感冒的常用药物，具有清热解毒、疏风散热的功效。', function: '适用于发热重、微恶风、头胀痛、咳嗽、咽干等症状。', usage: '口服，一次4片，一日3次，或遵医嘱。', caution: '孕妇慎用。' },
        // 其他西药...
      ],
      herb: {}
    };
  },
  created() {
    this.loadHerbDetail();
  },
  methods: {
    loadHerbDetail() {
      const id = parseInt(this.$route.query.id);
      const type = this.$route.query.type;

      let dataset;
      if (type === 'herb') {
        dataset = this.herbs;
      } else if (type === 'western') {
        dataset = this.westernMedicines;
      } else {
        this.$message.error('未知药品类型');
        return;
      }

      const foundItem = dataset.find(h => h.id === id);
      if (foundItem) {
        this.herb = foundItem;
      } else {
        this.$message.error('未找到该药品的信息');
      }
    }
  }
};
</script>

<style scoped>
.herb-detail {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

.detail-card {
  padding: 30px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.image-container {
  text-align: center;
  margin-bottom: 20px;
}

.herb-image {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 6px;
}

.content {
  font-size: 14px;
  line-height: 1.6;
}

strong {
  color: #333;
}
</style>